<template>
  <span>
      <a href="#" style="margin-right: 20px;" @click="visible = true">生成JSON数据</a>
      <a-modal
        title="JSON数据"
        :visible="visible"
        @ok="visible = false"
        @cancel="visible = false"
      >
        <codemirror v-model="code" :options="cmOptions" />
      </a-modal>
  </span>
</template>

<script>
import { mapState } from 'vuex'
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'

import { deepClone } from '../../utils'
import { demoData2renderData } from '../../utils/core'

export default {
  name: 'GenerateJson',
  components: {
    codemirror
  },
  data () {
    return {
      visible: false,
      cmOptions: {
        tabSize: 4,
        mode: 'text/javascript',
        theme: 'base16-dark',
        lineNumbers: true,
        line: true
      },
      code: ''
    }
  },
  computed: mapState({
    formData: state => state.formDesigner.formData
  }),
  watch: {
    visible (val) {
      if (val) {
        const formData = deepClone(this.formData)
        const result = demoData2renderData(formData)
        this.code = 'var JSON = ' + JSON.stringify(result, null, 2)
      }
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
</style>
